<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0,minimal-ui">
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>

    <meta name="generator" content="MetInfo 6.0.0"
          data-variable="https://show.metinfo.cn/m/mui041/361/|cn|10001|0|10001|mui041|cn"/>
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/cisall.css">
    <style>
        .photo-detail {
            width: 70.33%;
            margin: 0 auto;
        }
        .photo-title {

        }
        .photo-title h3 {
            margin-bottom: 16px;
            font-size: 16px;
            color: #3f3f3f;
            font-weight: bolder;
        }
        .subtitle {
            padding: 20px 0;
        }
        .aPageNum {
            position: relative;
            float: left;
            width: 50px;
            line-height: 1;
        }
        .aPageNum p {
            line-height:1;
            font-size: 20px;
            margin: 0;
        }
        .aPageNum:after {
            position: absolute;
            top: 50%;
            content: '';
            width: 100%;
            height: 1px;
            background: #393939;
            /*border: 1px solid #969698;*/
            transform: rotate(-45deg);
            -ms-transform: rotate(-45deg); /* IE 9 */
            -webkit-transform: rotate(-45deg); /* Safari and Chrome */
        }
        .subtitle .txt {
            line-height: 1.7;
            margin: 0 80px;
            font-size: 13px;
            color: #3f3f3f;
        }
        .pic-prev, .pic-next {
            position: absolute;
            bottom: 16px;
            margin: 0;
            font-size: 24px;
            color: #484848;
            cursor: pointer;
            z-index: 9;
        }
        .pic-prev {
            right: 24px;
        }
        .pic-prev:after {
            content: '';
            position: absolute;
            right: 4px;
            bottom: 6px;
            width: 1px;
            height: 24px;
            background: #484848;
        }
        .pic-next {
            right: 0;
        }
        .zoomed .swiper-container{-webkit-filter:blur(3px);filter:blur(3px);}
    </style>
</head>
<body>
<!--[if lte IE 8]>
<div class="text-center padding-top-50 padding-bottom-50 bg-blue-grey-100">
    <p class="browserupgrade font-size-18">
        你正在使用一个<strong>过时</strong>的浏览器。请<a href="http://browsehappy.com/" target="_blank">升级您的浏览器</a>，以提高您的体验。
    </p>
</div>
<![endif]-->
<header>
    <nav class="navbar fixed-top  navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="../index.html">
            <img src="../../images/base/logo.png" alt="">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav navlist ml-auto">
                <li class="nav-item active">
                    <a class="nav-link active" href="photo.html">图片</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">数字图书馆</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="hall.html">在线展厅</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="video.html">视频专题</a>
                </li>
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="javacript:window.history(-1)"><i class="iconcis icon-goback f30"></i></a>
                </li>
                <li class="nav-item border-right">
                    <a class="nav-link" href="../index.html"><i class="iconcis icon-home f20"></i></a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
                        <i class="iconcis icon-search"></i>
                    </a>
                    <div class="dropdown-menu search-menu">
                        <form class="form-inline">
                            <input class="form-control" type="search" placeholder="搜索" aria-label="搜索">
                            <button class="btn" type="submit"><i class="iconcis icon-search"></i></button>
                        </form>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
                        <i class="iconcis icon-user"></i>
                    </a>
                    <div class="dropdown-menu login-menu">
                        <form class="index-login">
                            <div class="wrapper">
                                <h4 class="bg-line-red">登录</h4>
                                <div class="login-group">
                                    <i class="iconcis icon-user"></i>
                                    <input type="text" placeholder="请输入用户名/电子信箱">
                                </div>
                                <div class="login-group">
                                    <i class="iconcis icon-user"></i>
                                    <input type="password" placeholder="请输入密码">
                                </div>
                                <button class="btn" type="submit">立即登录</button>
                                <p class="link"><a href="register.html">免费注册</a>|<a href="password.html">忘记密码</a></p>
                                <h5>快捷登录</h5>
                                <p>用第三方账号快速登录</p>
                                <div class="row text-center">
                                    <div class="col-sm-6">
                                        <img src="../images/base/login_qq.png">
                                        <p>QQ登录</p>
                                    </div>
                                    <div class="col-sm-6">
                                        <img src="../images/base/login_wx.png">
                                        <p>微信登录</p>
                                    </div>
                                </div>
                            </div>
                            <div class="login-footer">
                                注册或登录即表示同意<br>
                                本系统的”隐私保护条款”和”使用条款”。
                            </div>
                        </form>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
                        <i class="iconcis"></i>
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#"><i class="flag flag-china"></i>简体中文版</a>
                        <a class="dropdown-item" href="#"><i class="flag flag-english"></i>English</a>
                        <a class="dropdown-item" href="#"><i class="flag flag-sprache"></i>Sprache</a>
                        <a class="dropdown-item" href="#"><i class="flag flag-japan"></i>日本語</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><i class="iconcis icon-lines"></i></a>
                </li>
            </ul>
        </div>
    </nav>
</header>

<div class="body">
    <div class="container-fluid">
        <div class="pt-4" style="background: #e5e6e8">
            <div class="photo-detail">
                <div class="photo-title clearfix">
                    <h3>
                        <i class="iconcis icon-gnext"></i>图片主题的具体的名称文字比内容摘要的文字要大 (25张)
                        <p class="cis-operate float-right">
                            <a class="item"><i class="iconcis icon-star"></i>收藏</a>
                            <a class="item"><i class="iconcis icon-zan"></i>赞&nbsp;104</a>
                            <a class="item"><i class="iconcis icon-message"></i>评论&nbsp;94</a>
                            <span><i class="iconcis icon-share"></i>分享到&nbsp;</span>
                            <a><i class="iconcis icon-wxin c93"></i></a>
                            <a><i class="iconcis icon-qq c93"></i></a>
                            <a><i class="iconcis icon-weibo c93"></i></a>
                        </p>
                    </h3>

                </div>
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="../../images/upload/photo_banner01.jpg">
                            <div class="subtitle clearfix">
                                <div class="aPageNum">
                                    <p class="text-left">08</p>
                                    <p class="text-right">25</p>
                                </div>
                                <p class="txt">
                                    2018年1月31日专业航拍社交平台SkyPixel天空之城(TM)当日宣布，与DJI大疆创新合办的2017年天空之城摄影大赛圆满结束，本次比赛吸引到自全球近150个国家和地区的用户参加，收到了超过44,800份作品。全球航拍年度大奖《冰上魅影》</p>
                            </div>
                            <a href="../../images/upload/photo_banner01.jpg">
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <img src="../../images/upload/photo_banner01.jpg">
                            <div class="subtitle clearfix">
                                <div class="aPageNum">
                                    <p class="text-left">09</p>
                                    <p class="text-right">25</p>
                                </div>
                                <p class="txt">
                                    2018年1月31日专业航拍社交平台SkyPixel天空之城(TM)当日宣布，与DJI大疆创新合办的2017年天空之城摄影大赛圆满结束，本次比赛吸引到自全球近150个国家和地区的用户参加，收到了超过44,800份作品。全球航拍年度大奖《冰上魅影》</p>
                            </div>
                        </div>
                    </div>
                    <!-- Add Arrows -->
                    <div class="pic-prev"><i class="iconcis icon-xprev"></i></div>
                    <div class="pic-next"><i class="iconcis icon-xnext"></i></div>

                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="commentPanel">
            <div class="comment-title">
                <span class="isay"><i class="iconcis icon-write"></i>我有话说<i class="iconcis icon-linedown"></i></span>
                <p class="cis-operate">
                    <a class="item"><i class="iconcis icon-star"></i>收藏</a>
                    <a class="item"><i class="iconcis icon-zan"></i>赞&nbsp;104</a>
                    <a class="item"><i class="iconcis icon-message"></i>评论&nbsp;94</a>
                    <span><i class="iconcis icon-share"></i>分享到&nbsp;</span>
                    <a><i class="iconcis icon-wxin c93"></i></a>
                    <a><i class="iconcis icon-qq c93"></i></a>
                    <a><i class="iconcis icon-weibo c93"></i></a>
                </p>
            </div>
            <div class="comment-box">
                <p class="comment-sum">94条评论 | 208人参与我有话说</p>
                <div class="comment-text">
                    <textarea>我要说两句...</textarea>
                    <button class="comment-btn">发布</button>
                </div>
                <p class="comment-tip">网友评论仅供其表达个人看法，并不表明本站立场。</p>
            </div>
            <div class="comment-list">
                <div class="comment">
                    <div class="common-avatar">
                        <img src="../../images/upload/user_tx04.jpg" width="100%" height="100%">
                    </div>
                    <div class="comment-block">
                        <p class="comment-user">弃珠若泥视生如梦[福建泉州]</p>
                        <p class="comment-content">这帮评委！评出来的大奖都是密集恐惧症不敢看的的照片：不外乎点状排列有序，这就是所谓的艺术</p>
                        <div class="comment-operate">
                        <span class="operate-item operate-clock">
                            <i class="iconcis icon-clock"></i>
                            2018-02-09 09:34
                        </span>
                            <span class="operate-item operate-report">举报</span>
                            <p class="float-right">
                            <span class="operate-item operate-up">
                                <i class="iconcis icon-zan"></i>赞
                            </span>
                                <span class="operate-item operate-rely">
                                <i class="iconcis icon-message"></i>回复
                            </span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="comment">
                    <div class="common-avatar">
                        <img src="../../images/upload/user_tx01.jpg" width="100%" height="100%">
                    </div>
                    <div class="comment-block bor0">
                        <p class="comment-user">弃珠若泥视生如梦[福建泉州]</p>
                        <p class="comment-content">这帮评委！评出来的大奖都是密集恐惧症不敢看的的照片：不外乎点状排列有序，这就是所谓的艺术</p>
                        <div class="comment-operate">
                        <span class="operate-item operate-clock">
                            <i class="iconcis icon-clock"></i>
                            2018-02-09 09:34
                        </span>
                            <span class="operate-item operate-report">举报</span>
                            <p class="float-right">
                            <span class="operate-item operate-up">
                                <i class="iconcis icon-zan"></i>赞
                            </span>
                                <span class="operate-item operate-rely">
                                <i class="iconcis icon-message"></i>回复
                            </span>
                            </p>
                        </div>
                    </div>

                    <div class="reply">
                        <div class="comment">
                            <div class="common-avatar">
                                <img src="../../images/upload/user_tx02.jpg" width="100%" height="100%">
                            </div>
                            <div class="comment-block">
                                <p class="comment-user">弃珠若泥视生如梦[福建泉州]</p>
                                <p class="comment-content">这帮评委！评出来的大奖都是密集恐惧症不敢看的的照片：不外乎点状排列有序，这就是所谓的艺术</p>
                                <div class="comment-operate">
                        <span class="operate-item operate-clock">
                            <i class="iconcis icon-clock"></i>
                            2018-02-09 09:34
                        </span>
                                    <span class="operate-item operate-report">举报</span>
                                    <p class="float-right">
                            <span class="operate-item operate-up">
                                <i class="iconcis icon-zan"></i>赞
                            </span>
                                        <span class="operate-item operate-rely">
                                <i class="iconcis icon-message"></i>回复
                            </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="comment">
                            <div class="common-avatar">
                                <img src="../../images/upload/user_tx03.jpg" width="100%" height="100%">
                            </div>
                            <div class="comment-block">
                                <p class="comment-user">弃珠若泥视生如梦[福建泉州]</p>
                                <p class="comment-content">这帮评委！评出来的大奖都是密集恐惧症不敢看的的照片：不外乎点状排列有序，这就是所谓的艺术</p>
                                <div class="comment-operate">
                        <span class="operate-item operate-clock">
                            <i class="iconcis icon-clock"></i>
                            2018-02-09 09:34
                        </span>
                                    <span class="operate-item operate-report">举报</span>
                                    <p class="float-right">
                            <span class="operate-item operate-up">
                                <i class="iconcis icon-zan"></i>赞
                            </span>
                                        <span class="operate-item operate-rely">
                                <i class="iconcis icon-message"></i>回复
                            </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="comment">
                    <div class="common-avatar">
                        <img src="../../images/upload/user_tx04.jpg" width="100%" height="100%">
                    </div>
                    <div class="comment-block">
                        <p class="comment-user">弃珠若泥视生如梦[福建泉州]</p>
                        <p class="comment-content">这帮评委！评出来的大奖都是密集恐惧症不敢看的的照片：不外乎点状排列有序，这就是所谓的艺术</p>
                        <div class="comment-operate">
                        <span class="operate-item operate-clock">
                            <i class="iconcis icon-clock"></i>
                            2018-02-09 09:34
                        </span>
                            <span class="operate-item operate-report">举报</span>
                            <p class="float-right">
                            <span class="operate-item operate-up">
                                <i class="iconcis icon-zan"></i>赞
                            </span>
                                <span class="operate-item operate-rely">
                                <i class="iconcis icon-message"></i>回复
                            </span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="comment">
                    <div class="common-avatar">
                        <img src="../../images/upload/user_tx04.jpg" width="100%" height="100%">
                    </div>
                    <div class="comment-block">
                        <p class="comment-user">弃珠若泥视生如梦[福建泉州]</p>
                        <p class="comment-content">这帮评委！评出来的大奖都是密集恐惧症不敢看的的照片：不外乎点状排列有序，这就是所谓的艺术</p>
                        <div class="comment-operate">
                        <span class="operate-item operate-clock">
                            <i class="iconcis icon-clock"></i>
                            2018-02-09 09:34
                        </span>
                            <span class="operate-item operate-report">举报</span>
                            <p class="float-right">
                            <span class="operate-item operate-up">
                                <i class="iconcis icon-zan"></i>赞
                            </span>
                                <span class="operate-item operate-rely">
                                <i class="iconcis icon-message"></i>回复
                            </span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="zoom" style="display: none;">
    <a class="close"><i class="iconcis icon-close"></i></a>
    <a href="#previous" class="previous"><i class="iconcis icon-xprev"></i></a>
    <a href="#next" class="next"><i class="iconcis icon-xnext"></i></a>
    <div class="content loading"></div>
</div>

<script src="../../js/base.js"></script>
<script src="../../js/cisall.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        delay: 5000,
        autoplay: true,
        loop: true,
        navigation: {
            nextEl: '.pic-next',
            prevEl: '.pic-prev',
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },

    });
    (function (e) {
        function u(u) {
            function c() {
                function h(e) {
                    e.show();
                    n.removeClass("loading")
                }

                var t = e(this),
                    r = parseInt(n.css("borderLeftWidth")),
                    i = s - r * 2,
                    u = o - r * 2,
                    a = t.width(),
                    f = t.height();
                if (a == n.width() && a <= i && f == n.height() && f <= u) {
                    h(t);
                    return
                }
                if (a > i || f > u) {
                    var l = u < f ? u : f,
                        c = i < a ? i : a;
                    if (l / f <= c / a) {
                        t.width(a * l / f);
                        t.height(l)
                    } else {
                        t.width(c);
                        t.height(f * c / a)
                    }
                }
                n.animate({
                        width: t.width(),
                        height: t.height(),
                        marginTop: -(t.height() / 2) - r,
                        marginLeft: -(t.width() / 2) - r
                    },
                    200,
                    function () {
                        h(t)
                    })
            }

            if (u) u.preventDefault();
            var a = e(this),
                f = a.attr("href");
            if (!f) return;
            var l = e(new Image).hide();
            e("#zoom .previous, #zoom .next").show();
            if (a.hasClass("zoom")) e("#zoom .previous, #zoom .next").hide();
            if (!r) {
                r = true;
                t.show();
                e("body").addClass("zoomed")
            }
            n.html(l).delay(500).addClass("loading");
            l.load(c).attr("src", f);
            i = a
        }

        function a() {
            var t = i.parent(".swiper-slidei").prev();
            if (t.length == 0) t = e(".swiper-container .swiper-slide:last-child");
            t.find("a").trigger("click")
        }

        function f() {
            var t = i.parent(".swiper-slide").next();
            if (t.length == 0) t = e("..swiper-container .swiper-slide:first-child");
            t.children("a").trigger("click")
        }

        function l(s) {
            if (s) s.preventDefault();
            r = false;
            i = null;
            t.hide();
            e("body").removeClass("zoomed");
            n.empty()
        }

        function c() {
            s = e(window).width();
            o = e(window).height()
        }

        e("body").append('<div id="zoom"><a class="close"></a><a href="#previous" class="previous"></a><a href="#next" class="next"></a><div class="content loading"></div></div>');
        var t = e("#zoom").hide(),
            n = e("#zoom .content"),
            r = false,
            i = null,
            s = e(window).width(),
            o = e(window).height();
        (function () {
            t.on("click",
                function (t) {
                    t.preventDefault();
                    if (e(t.target).attr("id") == "zoom") l()
                });
            e("#zoom .close").on("click", l);
            e("#zoom .previous").on("click", a);
            e("#zoom .next").on("click", f);
            e(document).keydown(function (e) {
                if (!i) return;
                if (e.which == 38 || e.which == 40) e.preventDefault();
                if (e.which == 27) l();
                if (e.which == 37 && !i.hasClass("zoom")) a();
                if (e.which == 39 && !i.hasClass("zoom")) f()
            });
            if (e(".swiper-container .swiper-slide a").length == 1) e(".swiper-container .swiper-slide a")[0].addClass("zoom");
            e(".zoom, .swiper-container .swiper-slide a").on("click", u)
        })();
        (function () {
            e(window).on("resize", c)
        })();
        (function () {
            e(window).on("mousewheel DOMMouseScroll",
                function (e) {
                    if (!i) return;
                    e.stopPropagation();
                    e.preventDefault();
                    e.cancelBubble = false
                })
        })()
    })(jQuery);

</script>
</body>
</html>